<template>
  <div class="page-container">
    <el-container>
      <el-header>
        <div style="width:80%;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 4px">
          <!--工具栏-->
          <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
            <el-form :inline="true" :model="filters" :size="size" ref="filters">
              <el-form-item label="时间范围">
                <el-date-picker
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  v-model="filters.startEndDate"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item prop="terminal">
                <el-radio-group v-model="filters.terminalGroup" @change="showOrHide">
                  <el-radio-button label="web"></el-radio-button>
                  <el-radio-button label="app"></el-radio-button>
                </el-radio-group>
              </el-form-item>

              <el-select v-model="filters.terminal1" size="small" v-show="isTerminal1Show" placeholder="选择" style="width:215px;">
                <el-option label="全平台" value="0" ></el-option>
                <el-option label="pc" value="1" ></el-option>
                <el-option label="html5" value="2" ></el-option>
              </el-select>
              <el-select v-model="filters.terminal2" size="small" v-show="isTerminal2Show"  placeholder="选择" style="width:215px">
                <el-option label="全平台" value="0" ></el-option>
                <el-option label="ios" value="3" ></el-option>
                <el-option label="android" value="4" ></el-option>
              </el-select>

              <el-form-item>
                <el-select v-model="filters.types" size="small"  style="width:215px">
                  <el-option v-for ="item in types_options"
                             :key ="item.value"
                             :label ="item.label"
                             :value ="item.value"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item prop="channel" label="渠道" style="margin-left:30px">
                <el-select v-model="filters.channel" placeholder="渠道" style="width:215px">
                  <el-option label="全部" value="0"></el-option>
                  <el-option label="BBC" value="1"></el-option>
                  <el-option label="天猫" value="2"></el-option>
                  <el-option label="京东" value="3"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <kt-button
                  icon="fa fa-search"
                  :label="$t('action.search')"
                  type="primary"
                  @click="findPage()"
                />
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-header>
      <el-main>

        <div class="toolbar" id="lineChart"
             style="float:left;padding-top:100px;padding-left:15px;width:100%;height:200px">

        </div>
      </el-main>
      <el-main>
        <!--表格内容栏-->
        <cy-table
          :height="350"
          :data="pageResult"
          :columns="filterColumns"
          :showOperation="false"
          :showEditOperation="false"
          :showDeleteOperation="false"
          :showBatchDelete="false"
          @findPage="findPage"
          :showSelection="false"
          ref="CyTable"
        ></cy-table>
      </el-main>

      <!-- 时间对比窗口 -->
      <el-dialog
        title="时间对比"
        :visible.sync="showAdjustModel"
        width="80%"
        height="100%"
        label-width="80px"
        label-position="right"
      >
        <el-form
          style="text-align:left"
          label-width="80px"
          label-position="right"
        >

          <el-table :data="adjustTable" border style="width: 100%" :visible.sync="showAdjustTable"
                    header-align="center"
                    align="center"
                    :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}">
            <el-table-column prop="dataDt" label="时间" sortable></el-table-column>
            <el-table-column prop="terminalName" label="终端名称" sortable></el-table-column>
            <el-table-column prop="activeUserCount" label="活跃用户" sortable></el-table-column>
            <el-table-column prop="oneLaunchUserCount" label="启动一次用户" sortable></el-table-column>
            <el-table-column prop="launchCount" label="启动次数" sortable></el-table-column>
            <el-table-column prop="avgUsedTime" label="平均单次使用时长" sortable></el-table-column>

            <el-table-column prop="orderCount" label="订单量" sortable></el-table-column>
            <el-table-column prop="salesAmount" label="销售量" sortable></el-table-column>
            <el-table-column prop="salesNum" label="销售额" sortable></el-table-column>

          </el-table>
        </el-form>
      </el-dialog>
    </el-container>

  </div>
</template>

<script>

  import CyTable from "@/views/Core/CyTable";
  import KtButton from "@/views/Core/KtButton";
  import {format} from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";

  export default {
    components: {
      CyTable,
      KtButton,
      TableColumnFilterDialog
    },
    name: "FlowSourceChannelAnalysis",
    data() {
      return {
        filterColumns: [],
        pageRequest: {pageNum: 1, pageSize: 10},
        pageResult: {},
        size: "small",
        filters: {
          startEndDate: "",
          terminalGroup: "web",
          terminal1: "",
          terminal2: "",
          types:"launchCount",
          channel:"",
          res: {
            "total": 1,
            "code": "0000",
            "rows": [
              {
              "terminalName": "全平台",
              "activeUserCount": 75,
              "oneLaunchUserCount": 0,
              "launchCount": 0,
              "avgUsedTime": 334,
              "orderCount": 0,
              "salesAmount": 0.00,
              "salesNum": 0,
              "dataDt": null
              }
            ]
          }
        },

        columns: [
          {prop: "activeUserCount", label: "活跃用户", minWidth: 120},
          {prop: "terminalName", label: "终端名称", minWidth: 50},
          {prop: "avgUsedTime", label: "平均单次使用时长", minWidth: 120},
          {prop: "oneLaunchUserCount", label: "启动一次用户", minWidth: 120},
          {prop: "launchCount", label: "启动次数", minWidth: 120},
          {prop: "orderCount", label: "订单量", minWidth: 120},
          {prop: "salesAmount", label: "销售量", minWidth: 120},
          {prop: "salesNum", label: "销售额", minWidth: 120},
          {prop: "", label: "操作", minWidth: 120, formatter:this.operate}
        ],
        types_options: [{
          value: 'activeUserCount',
          label: '活跃用户'

        }, {
          value: 'launchCount',
          label: '启动次数'
        }, {
          value: 'orderCount',
          label: '订单量'
        }, {
          value: 'oneLaunchUserCount',
          label: '启动一次用户'
        }, {
          value: 'avgUsedTime',
          label: '平均单次使用时长'
        }, {
          value: 'salesNum',
          label: '销量'
        }, {
          value: 'salesAmount',
          label: '销售额'
        }],
        isTerminal1Show: true,
        isTerminal2Show: false,
        mylineLegend: ['直接访问','外部链接','搜索引擎'],
        mylineseriesdatas:[
            {name:'直接访问',data:[656,570,728,786,267,30,587]},
            {name:'外部链接',data:[453,70 ,58 ,79 ,132,10,70]},
            {name:'搜索引擎',data:[1  ,0  ,0  , 1 ,2  ,0,1]}
          ],
        mylineXAxisData: ["2019-12-24", "2019-12-25", "2019-12-26", "2019-12-27", "2019-12-28", "2019-12-29", "2019-12-30"],

        //弹框数据
        showAdjustTable:false,
        showAdjustModel:false,


        adjustTable:[
          {
            "terminalName": null,
            "activeUserCount": 17,
            "oneLaunchUserCount": 0,
            "launchCount": 0,
            "avgUsedTime": 238,
            "orderCount": 0,
            "salesAmount": 0.00,
            "salesNum": 0,
            "dataDt": "2019-12-25"
          },
          {
            "terminalName": null,
            "activeUserCount": 14,
            "oneLaunchUserCount": 0,
            "launchCount": 0,
            "avgUsedTime": 423,
            "orderCount": 0,
            "salesAmount": 0.00,
            "salesNum": 0,
            "dataDt": "2019-12-26"
          },
          {
            "terminalName": null,
            "activeUserCount": 13,
            "oneLaunchUserCount": 0,
            "launchCount": 0,
            "avgUsedTime": 492,
            "orderCount": 0,
            "salesAmount": 0.00,
            "salesNum": 0,
            "dataDt": "2019-12-27"
          },
          {
            "terminalName": null,
            "activeUserCount": 12,
            "oneLaunchUserCount": 0,
            "launchCount": 0,
            "avgUsedTime": 293,
            "orderCount": 0,
            "salesAmount": 0.00,
            "salesNum": 0,
            "dataDt": "2019-12-30"
          },
          {
            "terminalName": null,
            "activeUserCount": 9,
            "oneLaunchUserCount": 0,
            "launchCount": 0,
            "avgUsedTime": 77,
            "orderCount": 0,
            "salesAmount": 0.00,
            "salesNum": 0,
            "dataDt": "2019-12-28"
          },
          {
            "terminalName": null,
            "activeUserCount": 8,
            "oneLaunchUserCount": 0,
            "launchCount": 0,
            "avgUsedTime": 563,
            "orderCount": 0,
            "salesAmount": 0.00,
            "salesNum": 0,
            "dataDt": "2019-12-24"
          },
          {
            "terminalName": null,
            "activeUserCount": 2,
            "oneLaunchUserCount": 0,
            "launchCount": 0,
            "avgUsedTime": 0,
            "orderCount": 0,
            "salesAmount": 0.00,
            "salesNum": 0,
            "dataDt": "2019-12-29"
          }
        ]
      }
    },

    methods: {
      findPage:function () {
        this.$refs.CyTable.findPageStaticState(this.filters);
      },

      //操作列
      operate(row, column, cellValue, index) {
        return  '<button type="button" class="operateCompare"> '
          +"时间对比"+
          '</button>'
      },

      // 处理表格列过滤显示
      initColumns: function () {
        let temp = [];

        $.each(this.columns, function (key, val) {
          temp.push(val);
        });
        this.filterColumns = temp;
      },

      showOrHide: function (label) {
        let this_ =this;
        if('web'==label){
          this_.isTerminal1Show =true;
          this_.isTerminal2Show =false;
        }else if('app'==label) {
          this_.isTerminal1Show =false;
          this_.isTerminal2Show =true;
        }

      }

    },
    mounted() {
      this.initColumns();
      this.$mychart.myLineChartMutSmooth('lineChart',this.mylineLegend,this.mylineXAxisData, this.mylineseriesdatas, "渠道表现概览");

      $(document).on(
        "click",
        ".operateCompare",
        function(e) {
          this.showAdjustModel = true;
          this.showAdjustTable = true;
        }.bind(this)

      );
    }
  }
</script>

<style scoped>

</style>
